<template>
	<div class='toc_IM_component_frame'>
		<div class='toc_IM_header'>
			<span style='display: inline-block;position: absolute; left: 10px;' @click="close">
				<img v-bind:src="imgConfig.back" style='width: 16px;'>
			</span>
			{{headerTitle}}
			<span style='display: inline-block;position: absolute; right: 10px;' @click="finished" v-if='selectedPersonArray.length>0'>
				完成
			</span>
		</div>
		<div class='toc_IM_choosePerson'>
			<div class='chooseList'>
				<span v-if='selectedPersonArray.length==0'>已选人员</span>
				<div v-for='item in selectedPersonArray' class='chooseItem'>
					<img v-bind:src='item.avatar'>
				</div>
			</div>
			<mt-search v-model="searchValue" placeholder="搜索人员">	
	    		<div class='toc_IM_searchList'>
	    			<div class='toc_list' v-for='item in search.resultList' v-if='item._id!=userId'  @click='choosePerson(item)'>
	    				<img class='avata' v-bind:src='item.avatar'>
	    				<span class='main'>{{item.name}}</span>
	    				<span style='margin: 10px 0;' v-if='item.origin==true'>
	    					<span class="mint-checkbox-core" v-bind:class="{'active':item.ischeck}" v-if='allowDel==true'></span>
	    					<span class="mint-checkbox-core readonly" v-bind:class="{'active':item.ischeck}" v-if='allowDel==false'></span>
	    				</span>
	    				<span style='margin: 10px 0;' v-if='item.origin==false'>
	    					<span class="mint-checkbox-core" v-bind:class="{'active':item.ischeck}" v-if='allowAdd==true'></span>
	    				</span>
	    			</div>
	    		</div>
			</mt-search>
		</div>
		
	</div>
	
</template>

<script>
	import systemConst from '@/assets/scripts/systemConst.js'
	import imgConfig from '@/assets/scripts/imgConfig.js'
	import units from '@/assets/scripts/units.js'
	import dataInterface from '@/assets/scripts/dataInterface.js'
	export default {
  	name: 'choosePerson',
  	props: ['componentsData'],
  	data(){
    	return {
    		headerTitle:'选择联系人',
    		imgConfig:imgConfig,
    		systemConst:systemConst,
    		searchValue:'',
    		search:{
    			resultList:[],
    		},
    		selectedPersonArray:[],
    		searchRundebounce:null,
    		createChatId:null,
    		allowAdd:true,
    		allowDel:true,
    		isCraeteChat:true,
    		autoToChat:true,
    	}
	},	
	watch:{
	  	searchValue(){
	  		this.searchRundebounce.setValue(this.searchValue);
	  		this.searchRundebounce.debounceftn();
	  	}
	},
	computed:{
  		userId(){return this.$store.state.userId},
  		messageList(){return this.$store.state.messageList.data},
  		userInfo(){return this.$store.state.userInfo}
  	},
  	mounted(){
  		this.init();		
  	},
  	methods:{
  		close(){
  			this.$emit('emit-components',null);
	  	},
	  	init(){
	  		/* 初始化 防抖函数   */
	  		this.searchRundebounce = new units.Debounce({
				callback:data=>{this.searchRun(data)}
			});
	  		this.searchRundebounce.initdebounce();
	  		/* 初始化 获得参数   */
	  		if(this.componentsData != null){
	  			this.headerTitle = this.componentsData.headerTitle==undefined?'选择联系人':this.componentsData.headerTitle;
	  			this.allowAdd = this.componentsData.allowAdd==undefined?true:this.componentsData.allowAdd;
	  			this.allowDel = this.componentsData.allowDel==undefined?true:this.componentsData.allowDel;
	  			this.isCraeteChat = this.componentsData.isCraeteChat==undefined?true:this.componentsData.isCraeteChat;
	  			this.autoToChat = this.componentsData.autoToChat==undefined?true:this.componentsData.autoToChat;
	  	
	  			this.componentsData.selected.forEach(item=>{
		  			item.ischeck=true;
		  			item.origin=true;
		  			this.selectedPersonArray.push(item);
		  		});
	  		};
	  	},
  		searchRun(search){
  			var _self =this;
  			dataInterface.searchAccountMem({name:search},res=>{
  				res.forEach(item=>{
  					item.ischeck=false;
  					item.origin=false;
  					_self.selectedPersonArray.forEach(selecteditem=>{
  						if(selecteditem._id == item._id){
  							item.ischeck=true;
  							item.origin=true;
  						};
  					});
  				});
  				_self.search.resultList=res;
  			});
		},
		checkMessageList(chatID){
	    	var result =false;
	    	var messageList =this.messageList;
	    	for(var a=0;a<messageList.length;a++){
	    		var item =messageList[a];
	    		if(chatID == item.chat._id){result =true;break;}
	    	};
	    	return result
	    },
		addThisPerson(item){
			if(item._id!=this.userId){
				var flag=true;
		  		for(var a=0;a<this.selectedPersonArray.length;a++){
		  			if(this.selectedPersonArray[a]._id==item._id){flag=false;};
		  		};
		  		if(flag==true){this.selectedPersonArray.push(item)}
			}else{
				this.$toast("无需添加自己");
			};	
		},
		choosePerson(item){
			if(item.origin){
				if(item.ischeck==true && this.allowDel ==true){
					this.delThisPerson(item._id);
					item.ischeck=false;
				}else if(item.ischeck==false){
					this.addThisPerson(item);
					item.ischeck=true;
				};
			}else{
				if(item.ischeck==true){
					this.delThisPerson(item._id);
					item.ischeck=false;
				}else if(item.ischeck==false && this.allowAdd ==true){
					this.addThisPerson(item);
					item.ischeck=true;
				};
			};
		},
		delThisPerson:function(id){
	  		for(var a=0;a<this.selectedPersonArray.length;a++){
	  			if(this.selectedPersonArray[a]._id==id){
	  				this.selectedPersonArray.splice(a,1);
	  			};
	  		};
	  	},
	  	finished(){
	  		if(this.isCraeteChat){
	  			new Promise((resolve)=>{
	  				this.craeteChat(resolve)
	  			}).then((data)=>{
	  				if(!this.autoToChat){
		  				this.$emit('emit-components',{
		  					chatId:data,
		  					selectedPersonArray:this.selectedPersonArray
		  				});
		  			};
	  			}) ;
	  		}else{
	  			var emitData = this.selectedPersonArray;
	  			this.$emit('emit-components',{
					functionName:function(){
						this.upDateMemList(emitData);
					}
				});
	  		};	  		
	  	},
	  	craeteChat(resolve){
			var createTitle,createMem,cType,accountID;
			if(this.selectedPersonArray.length==1){
				//单人聊天
				createTitle="TOC_IM_PRIVATE";
				createMem=[this.userId,this.selectedPersonArray[0]._id];
				cType=this.systemConst.ChatType.ChatSingle;
				accountID=this.selectedPersonArray[0].accountID;
			}else{
				//群聊聊天
				accountID=this.selectedPersonArray[0].accountID;
				createTitle=this.userInfo.name+',';
				createMem=[this.userId];
				cType=this.systemConst.ChatType.ChatGroup;
				this.selectedPersonArray.forEach((item,index) =>{
					if(index!=this.selectedPersonArray.length-1){
						createTitle+=item.name+','
					}else{
						createTitle+=item.name;
					};
					createMem.push(item._id)
				});
			};
			dataInterface.createChat({
    			accountID:accountID,
    			chatType: cType,
    			title: createTitle,
    			mem: createMem,
    			desc: "TOC_IM_PRIVATE",
    			approval: "1",
    			allowInvites: "1",
    			avatar: "TOC_IM_PRIVATE",
    			creator:this.userId,
    			createTime:new Date().getTime(),
    			updateTime:new Date().getTime()
			},(res)=>{
				this.allowCreate=false;
  				if(this.checkMessageList(res.chat._id)){
  					//已存在聊天列表				
  				}else{
  					//新建在聊天列表写入记录
  					this.$store.commit({type:'topMessageList',newMsgItem:res});
  				};
  				if(this.autoToChat){
  					this.$root.$router.push({path: 'chat',query:{chatId:res.chat._id}});
  				}else{
  					this.createChatId= res.chat._id;
  					resolve(res.chat._id)
  				}
  				
			});
		}
  	}
  }
</script>

<style>
	div.toc_IM_choosePerson div.mint-searchbar{
		background: #f8f8f8;
		border-bottom: 1px solid #ededed;
	}
	div.toc_IM_searchList{
		width: 100%;
		display: table;
		box-sizing: border-box;
		min-height: 100px;
	}
	div.toc_IM_choosePerson div.mint-search-list{
		padding-top: 0;
		position: relative;
	}
	div.toc_IM_choosePerson div.chooseList{
		width: 100%;
		display: table;
		box-sizing: border-box;
		background: #fff;
		line-height: 32px;
		border-bottom: 1px solid #ededed;
		padding: 8px;
		min-height: 51px;
		color: #999;
		font-size: 14px;
	}
	div.toc_IM_choosePerson div.chooseList div.chooseItem{
		width: 30px;
		height:30px;
		float: left;
		margin: 2px 2px;
	}
	div.toc_IM_choosePerson div.chooseList div.chooseItem img{
		width: 100%;
	}
	span.mint-checkbox-core.active{
	    background-color: #26a2ff;
	    border-color: #26a2ff;
	}
	span.mint-checkbox-core.readonly.active{
		background-color: #ccc;
	    border-color: #ccc;
	}
	span.mint-checkbox-core.active:after{
		border-color: #fff;
    	-webkit-transform: rotate(45deg) scale(1);
    	transform: rotate(45deg) scale(1);
	}
</style>